<template>
<div :class="wrapClass" style="width: 100%; height: 100%" :id="id"></div>
</template>

<script>
import {
  COLORS
} from '@/constants'
import mixins from './mixins';
export default {
  name: 'vbar',
  mixins: [mixins],
  props: {
    id: {
      type: String,
      default: 'vbar'
    },
    wrapClass: String,
    option: {
      type: Object,
      default: () => {}
    },
    legend: {
      type: Array,
      default: () => []
    },
    dimensions: {
      type: Array,
      default: () => []
    },
    source: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    getDefOptions() {
      const defOption = {
        color: COLORS,
        legend: {
          top: 10,
          left: 30,
          itemGap: 20,
          icon: 'rect',
          // selectedMode: false,
          textStyle: {
            color: '#767e91',
          },

          selectorItemGap: 20,
          data: this.legend
        },
        tooltip: {
          padding: 0,
          formatter: function (params) {
            let htmlStr = "<div style='background: #282b3c; border-radius: 5px; padding: 20px; width: 160px;'>"
            htmlStr += `
                <div style="display: flex; border-bottom: 1px solid #ff6666; align-items: center; height: 28px;">
                  <div style="width: 4px; height: 4px; position: relative; background: #ff6666"></div>
                  <div style="font-size: 12px; color: #e6e9f5; margin-left: 5px;">${params.name}</div>
                </div>
              `
            const values = Object.keys(params.value);
            values.forEach((key, i) => {
              if (i !== 0) {
                htmlStr += `<div style="margin-top: 20px;">
                  <div style="display: flex; height: 12px; align-items: center;">
                    <div style="background: ${COLORS[i-1]}; width: 18px; height: 12px;"></div>
                    <div style="font-size: 12px; color: #767e91; margin-left: 10px;">${key}</div>
                  </div>
                  <div style="color: #fff; font-size: 14px; line-height: 1; margin-top: 13px">${params.value[key]}</div>
                </div>`
              }
            })
            htmlStr += "</div>"
            return htmlStr;
          },
        },
        dataset: {
          dimensions: this.dimensions,
          source: this.source
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: true,
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#767e91'
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#767e91',
            formatter: '{value} %'
          },
          splitLine: {
            lineStyle: {
              width: 1,
              type: 'dotted'
            }
          },
        },
        series: [{
            type: 'bar',
            barWidth: '12px'
          },
          {
            type: 'bar',
            barWidth: '12px'
          },
          {
            type: 'bar',
            barWidth: '12px'
          }
        ]
      };

      return Object.assign({}, defOption, this.option)
    }
  },
  data() {
    return {
      myCharts: null
    }
  },
  mounted() {
    const options = this.getDefOptions;
    if (options) {
      this.myCharts = this.$echarts.init(document.getElementById(this.id));
      this.myCharts.setOption(options);
      this.myCharts.on('click', (params) => {
        const {
          name
        } = params;
        this.$emit('clickBar', name);
      })
      this.handleResize(this.myCharts);
    }
  },
  watch:{
    getDefOptions: {
      handler: function (nval) {
        this.myCharts.setOption(nval);
      },
      deep: true,
    },
  }
}
</script>
